<template>
    <div class="goods-list">
        <!-- <router-link tag="div" :to="'/home/goodsinfo/'+item.id" class="goods-item" v-for="item in goodslist" :key="item.id"> -->
        <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="getDetail(item.id)">
            <img :src="item.img_url" alt="">
            <div>
                <h2>{{ item.title }}</h2>
                <div class="goodslist-content">
                    <p class="price">
                        <span class="new">￥{{ item.sell_price }}</span>
                        <span class="old">￥{{ item.market_price }}</span>
                    </p>
                    <p class="num">
                        <span class="num-left">热卖中</span>
                        <span class="num-right">剩{{ item.stock_quantity }}件</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- 加载更多 -->
            <mt-button type="danger" size="large" @click="getMoreGoods">加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
    data(){
        return {
            pageindex:1,
            goodslist:[]
        }
    },
    created(){
        this.getGoodsList()
    },
    methods:{
        getGoodsList(){
            this.$http.get('api/getgoods?pageindex=' + this.pageindex).then(result=>{
                if(result.body.status === 0){
                    // this.goodslist = result.body.message
                    this.goodslist = this.goodslist.concat(result.body.message)
                }else{
                    Toast('获取商品失败!')
                }
            })
        },
        getMoreGoods(){
            this.pageindex ++
            this.getGoodsList()
        },
        getDetail(id){
            // 使用 js 的形式进行路由导航

            // 注意：一定要区分 $route 和 $router 这两个对象
            // 其中：$route 是路由的【参数对象】，所有路由中的参数，params 、query 都属于它
            // 其中：$router 是一个路由【导航对象】，用它可以方便的使用 js 代码，实现路由的前进后退，跳转到新的 URL 地址
            // 1. 最简单的
            // this.$router.push("/home/goodsinfo/" + id)
            // 2. 传递对象
            this.$router.push({ path:"/home/goodsinfo/" + id })
            // 3. 传递命名的路由
            // this.$router.push({ name:'goodsinfo' , params:{ id }})
        }
    }
}
</script>

<style lang="scss" scoped>
    *{
        margin:0;
        padding:0;
    }
    .goods-list{
        display: flex;
        flex-wrap: wrap;
        padding:5px;
        justify-content:space-between;
        .goods-item{
            width:49%;
            border: 1px solid #ccc;
            text-align:center;
            overflow:hidden;
            margin-bottom: 5px;
            padding:2px;
            min-height:245px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            img{
                width:98%;
            }
            h2{
                margin:3px auto;
                width:90%;
                font-size:15px;
                white-space:nowrap;
                text-overflow:ellipsis;
                overflow:hidden;
            }
            .goodslist-content{
                background-color:#eee;
                .price{
                    text-align: left;
                    .new{
                        font-weight:bold;
                        font-size:16px;
                        color:red;
                        padding:0 6px;
                    }
                    .old{
                        text-decoration:line-through;
                        font-size:14px;
                    }
                }
                .num{
                    display: flex;
                    justify-content: space-between;
                    padding:0 6px;
                }
            }
            
        }
    }
</style>